<template>

  <div class="companysInfo w-1400">
    <div class="list">
      <div v-for="(item, index) in productList" :key="index" class="list-item" @click="openDetail(item)">
        <img :src="item.imgList[0]" class="company-icon" />
        <div class="material">{{ item.title }}</div>
        <div class="name">{{ item.company_name }}</div>
        <div class="info">
          <div>
            <img src="@/static/engineering5188/goodsAndServices/address.png" />
            <span class="address">{{ item.province }}{{ item.city }}{{ item.district }}</span>
          </div>
          <div class="date">{{ item.created_at.split(' ')[0] }}</div>
        </div>
      </div>
      <div class="nodata" v-if="productList.length == 0">暂无数据</div>
    </div>
    <div class="pageClass" v-if="productList.length > 0">
      <div class="pageClass-first" @click="LoadFistData">首页</div>
      <div class="pageClass-Last" @click="LoadLastData">上一页</div>
      <template v-if="totalPage < 6">
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)"
          v-if="totalPage >= 1">1</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)"
          v-if="totalPage >= 2">2</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 3 }" @click="loadPageData(3)"
          v-if="totalPage >= 3">3</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 4 }" @click="loadPageData(4)"
          v-if="totalPage >= 4">4</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 5 }" @click="loadPageData(5)"
          v-if="totalPage >= 5">5</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 6 }" @click="loadPageData(6)"
          v-if="totalPage >= 6">6</div>
      </template>
      <template v-else>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)">1
        </div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)">2
        </div>
        <div class="pageShenLue">...</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage - 1 }"
          @click="loadPageData(totalPage - 1)">{{ totalPage - 1 }}</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage }" @click="loadPageData(totalPage)">{{
          totalPage }}</div>
      </template>
      <div class="pageClass-Last" @click="LoadNextData">下一页</div>
      <div class="pageClass-first" @click="LoadEndData">末页</div>
    </div>
  </div>
</template>
<script>

import { mapState } from "vuex";

export default {
  name: "companysInfo",
  components: {

  },
  props: {
    queryData: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      companysInfoList: [],
      productList: [],
      totalPage: 0,
      currentPage: 1,
    };
  },
  computed: {
    ...mapState([
            "userInfo",
        ]),
  },
  watch: {
    queryData(newVal) {
      console.log('newVal',newVal);
      this.getProductList(newVal);
    },
  },

  created() {
    this.getProductList(this.queryData)
  },

  methods: {
    openDetail(item){
      this.$router.push({
        path: '/companyInfo/product',
        query: {
          shop_id: item.shop_id,
          detail: true,
          id: item.id,
        }
      })
    },
    getProductList(query) {
      this.$httpApi("/api/getProductList", {
        page: 1,
        limit: 10,
        ...query,
      }, "get").then(res => {
        res.data.list.forEach(element => {
          element.imgList = element.image.split(',');
        });
        this.productList = res.data.list;
        this.totalPage = Math.ceil(res.data.count / 10);
        this.$emit('updateCount', res.data.count);
      })
    },
    LoadFistData() {
      this.currentPage = 1;
      this.getProductList();
    },
    LoadLastData() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getProductList();
      }
    },
    LoadNextData() {
      if (this.currentPage < this.totalPage) {
        this.currentPage++;
        this.getProductList();
      }
    },
    LoadEndData() {
      this.currentPage = this.totalPage;
      this.getProductList();
    },
    loadPageData(val) {
      this.currentPage = val;
      this.getProductList();
    },
    lastProduct() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      } else {
        alertErr('已经是第一个产品了');
      }
    },
    NextProduct() {
      if (this.currentIndex < this.productList.length - 1) {
        this.currentIndex++;
      } else {
        alertErr('已经是最后一个产品了');
      }
    }
  },
};
</script>
<style scoped lang="less">
.companysInfo {
  height: auto;
  display: flex;
  max-width: @engineerwidth;
  flex-direction: column;

  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .list-item {
      margin-top: 20px;
      margin-right: 20px;
      display: flex;
      width: 264px;
      flex-direction: column;
      border: 1px solid #F2F2F2;
      background-color: #fff;
      cursor: pointer;

      .company-icon {
        width: 264px;
        height: 162px;
      }

      .material {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #000000;
        text-align: left;
        font-style: normal;
        margin-top: 12px;
        margin-left: 12px;
        margin-right: 12px;
      }

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #858585;
        text-align: left;
        margin: 12px;
      }

      .info {
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;

        img {
          width: 12px;
          height: 16px;

        }

        .address {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #858585;
          text-align: left;
          margin-left: 8px;
        }

        .date {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          text-align: right;
          font-style: normal;
        }
      }

      &:nth-child(5n) {
        margin-right: 0px !important;
      }
    }
  }

}

.pageClass {
  display: flex;
  margin-top: 26px;
  justify-content: center;
  padding-bottom: 26px;

  .pageClass-first {
    width: 40px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #EEEEEE;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 32px;
    text-align: center;
    margin-right: 16px;
    cursor: pointer;
  }

  .pageClass-Last {
    width: 69px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #EEEEEE;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 32px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
  }

  .pageClass-num {
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #EEEEEE;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 32px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
  }

  .pageShenLue {
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    margin-right: 10px;
  }

  .active {
    background: #31A41B;
    color: #FFF;
  }
}

.nodata{
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>
